<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <table border="">
            <tr v-for="(stu, i) in stus">
                <td>{{ stu.商品编号 }}</td>
                <td>{{ stu.商品名 }}</td>
                <td>{{ stu.商品图片 }}</td>
                <td>{{ stu.库存 }}</td>
                <td>
                    <button type="button" @click="del(i)">删除</button>
                </td>
            </tr>
        </table>
        商品编号:<input type="text" v-model="商品编号"><br />
        商品名:<input type="text" v-model="商品名"><br />
        商品图片:<input type="text" v-model="商品图片"><br />
        库存:<input type="text" v-model="库存"><br />
        <button @click="add">添加</button>
    </div>
    
    <script>
        var app = Vue.createApp({
            data() {
                return {
                    商品编号: '',
                    商品名: '',
                    商品图片: '',    
                    库存: '',    
                    stus: [
                        {
                            商品编号: 1,
                            商品名: "iphon14",
                            商品图片: './img/iphone14.jpg',
                            库存: 5
                        },
                        {
                            商品编号: 2,
                            商品名: "华为mate6",
                            商品图片: './img/华为mate6.jpg',
                            库存: 4
                        }
                    ]
                }
            },
            methods: {
                add: function() {
                    console.log(this.商品编号 + "," + this.商品名 + "," + this.商品图片 + "," + this.库存);
                    var stu = {
                        商品编号: parseInt(this.商品编号),
                        商品名: this.商品名,
                        商品图片: this.商品图片,
                        库存: parseInt(this.库存)
                    }
                    this.stus.push(stu);
                },
                del: function(i) {
                    this.stus.splice(i, 1);
                }
            }
        });
        var vm = app.mount("#app");
    </script>
</body>
</html>